<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>沙立方</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="renderer" content="webkit">
	<!-- 设置缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
	<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
	<meta name="format-detection" content="telephone=no, email=no" />
	<!-- 启用360浏览器的极速模式(webkit) -->
	<meta name="renderer" content="webkit">
	<!-- 避免IE使用兼容模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
	<meta name="HandheldFriendly" content="true">
	<!-- 微软的老式浏览器 -->
	<meta name="MobileOptimized" content="320">
	<!-- uc强制竖屏 -->
	<meta name="screen-orientation" content="portrait">
	<!-- QQ强制竖屏 -->
	<meta name="x5-orientation" content="portrait">
	<!-- UC强制全屏 -->
	<meta name="full-screen" content="yes">
	<!-- QQ强制全屏 -->
	<meta name="x5-fullscreen" content="true">
	<!-- UC应用模式 -->
	<meta name="browsermode" content="application">
	<!-- QQ应用模式 -->
	<meta name="x5-page-mode" content="app">
	<!-- windows phone 点击无高光 -->
	<meta name="msapplication-tap-highlight" content="no">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="../assets/i/favicon.png">
	<link rel="stylesheet" href="../assets/city/jquery-weui.min.css" />
	<link rel="stylesheet" href="../assets/css/amazeui.min.css" />
	<link rel="stylesheet" href="../assets/choice/iosSelect.css">
	<link rel="stylesheet" href="../assets/css/app.css">
	<link rel="stylesheet" href="../assets/css/yttApp.css">
</head>

<body class="bg-FFFBF2 registerChild">
	<header data-am-widget="header" class="am-header bg-white am-header-fixed borBottom bg-085492">
		<div class="am-header-left am-header-nav text-black padding-left05">
			<a href="javascript:history.go(-1)" class="text-black">
				<i class="am-align-left am-margin-0 am-icon-angle-left am-icon-md text-black co-fff"></i>
			</a>
		</div>
		<h1 class="am-header-title teblack">
			<a href="#title-link" class="co-fff">孩子信息</a>
		</h1>
	</header>
	<div class="am-container">
	   <div class="registerChildForm">
	       <div class="childMessDiv">
	          <div class="inputDiv">
	         	 <span class="titleInput"> <font style="color:red;">*</font>孩子姓名</span>
		           <input type="text" class="inputRegister bg-FFFBF2 public" id="childuserName" />
		       </div>
	          <div class="font12 name_validation unified" style="display:none">孩子姓名必填</div>
	          <div class="inputDiv">
		           <span class="titleInput"> <font style="color:red;">*</font>出生日期</span>
		           <input type="text" id="childuserBirthday" class="inputRegister bg-FFFBF2 public" readonly onfocus="this.blur();" />
	          </div>
	          <div class="font12 bir_validation unified" style="display:none">选择孩子出生年月</div>
	          <div class="inputDiv">
		           <span class="titleInput"> <font style="color:red;">*</font>性别</span>
		           <div class="sexChoise">
			           <div style="width:40%;position: relative;float:left;margin-top:7px;">
							<label class="am-radio-inline regradio am-u-sm-10" style="padding:0;width: 90%;">
								<input type="radio" value="0" name="sex" id="sexn" checked="true">
								<label for="sexn">男</label>
							</label>
						</div>
						<div style="width:40%;position: relative;float:right;margin-top:7px;">
							<label class="am-radio-inline regradio am-u-sm-10" style="padding:0;width: 90%;">
								<input type="radio" value="1" name="sex" id="sexn">
								<label for="sexn">女</label>
							</label>
						</div>
		           </div>
	          </div>
	          <div class="inputDiv inputHw">
		           <span class="titleInput"> <font style="color:red;">*</font>身高</span>
		           <input type="number" id="height" class="inputRegister bg-FFFBF2 public" readonly onfocus="this.blur();" />
		           <div class="inputUnit">厘米</div>
	          </div>
	          <div class="font12 height_validation unified" style="display:none">选择孩子身高</div>
	          <div class="inputDiv inputHw">
		           <span class="titleInput"> <font style="color:red;">*</font>体重</span>
		           <input type="text" id="weight" class="inputRegister bg-FFFBF2 public" readonly onfocus="this.blur();" />
		           <div class="inputUnit">公斤</div>
	          </div>
	          <div class="font12 weight_validation unified" style="display:none">选择孩子体重</div>
	          <div class="promptDiv">（填写赠送40立方币）</div>
	       </div>
	       <div class="childHeaderImg">
	           <div class="imgBack">
	               <img src="../img/boy.png" id="headImg" />
	               <div class="imgTitle">头像</div>
	               <input type="file" class="uploadImg" onchange="preview(this)" id="file"/>
	           </div>
	           
	       </div>
	   </div>
	   <div class="btnDivs">
	      <button class="compontBtn" id="compontBtn">完成</button>
	      <div class="skipDiv"><span class="skipBtn">跳过</span></div>
	   </div>
	</div>
	<div class="am-modal am-modal-loading am-modal-no-btn radius4" tabindex="-1" id="my-modal-loading" data-am-modal="{closeViaDimmer: 0}">
		  <div class="am-modal-dialog" style="border-radius: 4px;">
		    	<div class="am-modal-hd">加载中...</div>
			    <div class="am-modal-bd">
			      <span class="am-icon-spinner am-icon-spin"></span>
			    </div>
		  </div>
	</div>
	<div class="am-modal am-modal-alert" tabindex="-1" id="alert1" data-am-modal="{closeViaDimmer: 0}">
	   <div class="am-modal-dialog" style="border-radius: 4px;">
	    	<div class="am-modal-hd"></div>
		   	<div class="am-modal-bd alert1"></div>
	   		<div class="am-modal-footer">
	      		<span class="am-modal-btn" data-am-modal-confirm>确定</span>
	    	</div>
  		</div>
	</div>
	<script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/jquery.cookie.js"></script>
	<script src="../assets/city/jquery-weui.min.js"></script>
	<script src="../assets/js/amazeui.min.js"></script>
	<script src="../assets/js/fastclick.min.js"></script>
	<script src="../assets/choice/iosSelect.js"></script>
	<script src="../assets/choice/data.js"></script>
	<script src="../js/comm.js"></script>
	<script src="../js/slf.js"></script>
	<script>
	    var imgurl="";
		$(function(){
			$('.public').on('click',function(){
				$('.name_validation').css('display','none');
				$('.bir_validation').css('display','none');
				$('.height_validation').css('display','none');
				$('.weight_validation').css('display','none');
			})
			//禁止查看今天之后的信息
		    var nowTemp = new Date();
		    var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
		    var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
		    var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
		    var $myStart2 = $('#childuserBirthday');
		    var checkin = $myStart2.datepicker({
		    	onRender: function(date, viewMode) {
		            // 默认 days 视图，与当前日期比较
		            var viewDate = nowDay;
		            switch (viewMode) {
		              // moths 视图，与当前月份比较
		              case 1:
		                viewDate = nowMoth;
		                break;
		              // years 视图，与当前年份比较
		              case 2:
		                viewDate = nowYear;
		                break;
		            }
		
		            return date.valueOf() > viewDate ? 'am-disabled' : '';
		          }
		    })
			$("#compontBtn").click(function(){
				var childrenName = $.trim($("#childuserName").val());
				var childrenBirthday = $.trim($("#childuserBirthday").val());
				childrenBirthday =childrenBirthday.split("-").join("/");
				var sex = $.trim($("input[name='sex']:checked").val());
				var height=$.trim($("#height").val());
				var weight = $.trim($("#weight").val());
				var schoolId=slf.getQueryStringByName('schoolId');
				if(childrenName == ""){
					$('.name_validation').css('display','block');
				}else if(childrenBirthday == ""){
					$('.bir_validation').css('display','block');
				}else if(height == ""){
					$('.height_validation').css('display','block');
				}else if(weight == ""){
					$('.weight_validation').css('display','block');
				}else{
					if(imgurl==''||imgurl ==null){
						imgurl=$('#headImg').attr('src');
					}
					slf.ajax({
						url : "/childrenController/insertChildren",
						async : false,
						param :{
							name : childrenName,
							height :height,
							weight :weight,
							birthday : childrenBirthday,
							schoolId : schoolId,
							sex:sex,
                            headPortrait: imgurl
						},
						success : function(data){
							if(data.res == 1){
								$('.alert1').html(data.resMsg);
								$('#alert1').modal({
									closeViaDimmer: false,
								});
								setTimeout(function(){
									window.location.href="index.html";
                                },1000)
							}else{
								$('.alert1').html(data.resMsg);
								$('#alert1').modal();
							}
						}
					});	
				}
			})
			$(".skipDiv").click(function(){
				window.location.href="index.html"; 
			})
			//点击体重
			var showGeneralDom = document.querySelector('#weight');
		    showGeneralDom.addEventListener('click', function () {
		        var suId = showGeneralDom.dataset['su_id'];
		        var suValue = showGeneralDom.dataset['su_value'];
		        var weiId = showGeneralDom.dataset['wei_id'];
		        var weiValue = showGeneralDom.dataset['wei_value'];
		        var sanguoSelect = new IosSelect(2, 
		            [suData, weiData],
		            {
		                title: '体重（kg）',
		                itemHeight: 35,
		                oneLevelId: suId,
		                twoLevelId: weiId,
		                callback: function (selectOneObj, selectTwoObj) {
		                    $("#weight").val(selectOneObj.value + '.' + selectTwoObj.value)
		                }
		        });
		    });
		    //点击身高
		    var showBankDom = document.querySelector('#height');
		    showBankDom.addEventListener('click', function () {
		        var bankSelect = new IosSelect(1, 
		            [datas],
		            {
		                container: '.container',
		                title: '身高选择',
		                itemHeight: 50,
		                itemShowCount: 3,
		                callback: function (selectOneObj) {
		                    $("#height").val(selectOneObj.value)
		                },
		                fallback: function () {
		                    console.log(1);
		                },
		                maskCallback: function () {
		                    console.log(2);
		                }
		        });
		    });
		})
		/* 上传头像 预览 */
		function preview(file) {
		    var prevDiv = document.getElementById('preview');
		    if (file.files && file.files[0]) {
		      var reader = new FileReader();
		      reader.onload = function(evt){
		    	document.getElementById("headImg").src = ""+evt.target.result+"";
		      }
		      reader.readAsDataURL(file.files[0]);
		    }else {
		    	document.getElementById("headImg").src = ""+file.value+"";
		    }
		    $("#my-modal-loading").modal('open')
		    imgUpload();
		}
		function imgUpload(){
			 var file = document.getElementById("file").files[0];
	            var formData = new FormData();
	           	formData.append('file', file);
	           	console.log(file)
	           	console.log("获取文件路径")
	            $.ajax({
	            	url : "/web/attachment/upload",
	                type: "post",
	                data: formData,
	                contentType: false,
	                processData: false,
	                mimeType: "multipart/form-data",
	                success: function (data) {
	                	data = eval('('+data+')');
	                	console.log(data);
	                	imgurl=data.obj.path;
	                	$("#my-modal-loading").modal('close')
	                },
	                error: function (data) {
	                    console.log(data);
	                }
	            });
		}
	</script>
</body>

</html>